Page({
  data: {
    videoSrc: '', // 替换为你的视频地址
    startTime: 0, // 剪辑起始时间（秒）
    endTime: 5, // 剪辑结束时间（秒）
    videoDuration: 10, // 视频总时长（秒）
    frameInterval: 100, // 帧间隔（毫秒）
    frames: [], // 存储剪辑的帧数据
  },

  onReady() {
    
  },
  initVideo(){
    const query = wx.createSelectorQuery().in(this);
    console.log("initVedio")
    query.select('#myVideo').fields({ node: true, size: true }).exec((res) => {
      console.log("res===>",res)
      const videoNode = res[0].node;
      console.log("videoNode====>",videoNode)
      // 获取视频总时长
      videoNode.onCanPlay(() => {
        this.setData({
          videoDuration: videoNode.duration,
        });
      });
    });
  },

  // 修改起始时间
  onStartTimeChange(e) {
    this.setData({
      startTime: e.detail.value,
    });
  },

  // 修改结束时间
  onEndTimeChange(e) {
    this.setData({
      endTime: e.detail.value,
    });
  },
  chooseVedio(){
    wx.chooseMedia({
      count: 1,
      success:(res)=>{
        console.log(res)
        const uri = res.tempFiles[0].tempFilePath
        this.setData({
          videoSrc: uri
        })
        wx.getVideoInfo({
          src: uri,
          success:(res)=>{
            console.log('videoInfo=====>',res)
          }
        })
      }
    })
  },

  // 开始剪辑
  startTrim() {
    const { startTime, endTime, frameInterval } = this.data;

    const query = wx.createSelectorQuery().in(this);
    query.select('#myVideo').fields({ node: true, size: true }).exec((res) => {
      const videoNode = res[0].node;
      const ctx = wx.createCanvasContext('myCanvas', this);

      const canvasWidth = videoNode.videoWidth;
      const canvasHeight = videoNode.videoHeight;

      this.setData({
        canvasWidth,
        canvasHeight,
      });

      // 清空之前的帧数据
      this.setData({
        frames: [],
      });

      // 定义一个函数来逐帧提取视频内容
      const trimFrames = (currentTime) => {
        if (currentTime > endTime) {
          console.log('剪辑完成');
          return;
        }

        // 设置视频当前时间
        videoNode.currentTime = currentTime;

        // 绘制当前帧到 canvas
        setTimeout(() => {
          ctx.drawImage(videoNode, 0, 0, canvasWidth, canvasHeight);
          ctx.draw(false, () => {
            // 将 canvas 内容转为临时文件路径
            wx.canvasToTempFilePath({
              canvasId: 'myCanvas',
              success: (res) => {
                this.data.frames.push(res.tempFilePath); // 保存帧图片路径
                console.log(`已提取第 ${this.data.frames.length} 帧`);
              },
              fail: (err) => {
                console.error('提取帧失败:', err);
              },
            });
          });

          // 继续处理下一帧
          setTimeout(() => {
            trimFrames(currentTime + frameInterval / 1000);
          }, frameInterval);
        }, 100); // 等待视频加载完成
      };

      // 开始提取帧
      trimFrames(startTime);
    });
  },

  // 导出剪辑结果
  exportResult() {
    const { frames } = this.data;

    if (frames.length === 0) {
      wx.showToast({
        title: '请先剪辑视频',
        icon: 'none',
      });
      return;
    }

    // 示例：将所有帧合并为 GIF（需要使用后端服务或云函数）
    wx.showLoading({
      title: '正在导出...',
    });

    // 这里可以将帧上传到后端，由后端使用工具（如 FFmpeg）生成视频或 GIF
    wx.uploadFile({
      url: 'https://your-backend-api/upload', // 替换为你的后端接口
      filePath: frames[0], // 示例：上传第一帧作为测试
      name: 'file',
      success(res) {
        console.log('上传成功:', res);
        wx.hideLoading();
        wx.showToast({
          title: '导出成功',
        });
      },
      fail(err) {
        console.error('上传失败:', err);
        wx.hideLoading();
        wx.showToast({
          title: '导出失败',
          icon: 'none',
        });
      },
    });
  }
});